<template>
	<div class="app-container">
		<ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData">
		</ag-grid-vue>
		<button @click="getSelectedRows()">Get Selected Rows</button>
		<ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefsFetch" :rowData="rowDataFetch" rowSelection="multiple" @grid-ready="onGridReady">
		</ag-grid-vue>
		<importExcel />
	</div>
</template>
 
<script>
import { AgGridVue } from 'ag-grid-vue';
import importExcel from './child/importExcel'
export default {
	name: 'vueName',
	components: { AgGridVue, importExcel },
	data () {
		return {
			columnDefs: [
				{headerName: '姓名', field: 'name', sortable: true, filter: true },
        {headerName: '性别', field: 'gender', sortable: true, filter: true },
        {headerName: '年龄', field: 'age', sortable: true  }
			],
			rowData: [
				{name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
			],
			columnDefsFetch: [
				{headerName: 'Make', field: 'make', checkboxSelection: true},
				{headerName: 'Model', field: 'model'},
				{headerName: 'Price', field: 'price'}
			],
			rowDataFetch: null,
			gridApi: null,
			columnApi: null,
			autoGroupColumnDef: {
				headerName: 'Model',
				field: 'model',
				cellRenderer: 'agGroupCellRenderer',
				cellRendererParams: {
					checkbox: true
				}
			}
		}
	},
	created() {
		// console.log(this.columnDefs)
		this.init()
	},
	methods: {
		init() {
			this.axios.get('https://api.myjson.com/bins/15psn9')
				.then(res => {
					console.log(res)
					this.rowDataFetch = res.data
				})
		},
		onGridReady(params) {
			this.gridApi = params.api;
			this.columnApi = params.columnApi;
		},
		getSelectedRows() {
			const selectedNodes = this.gridApi.getSelectedNodes();
			const selectedData = selectedNodes.map( node => node.data );
			console.log(selectedData)
			const selectedDataStringPresentation = selectedData.map( node => node.make + ' ' + node.model).join(', ');
			// console.log(`Selected nodes: ${selectedDataStringPresentation}`);
		}
	}
}
</script>
 
<style scoped lang="scss">
	@import "./../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
  @import "./../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
	.table {
		width: 620px;
		height: 200px;
	}
</style>